import React from 'react';
import { WeaDialog, WeaSearchGroup, WeaLocaleProvider, WeaSelect, WeaBrowser, WeaInput, WeaTableEdit, WeaCheckbox, WeaError } from 'ecCom';
import * as mobx from 'mobx';
import { toJS } from 'mobx';
import { observer } from 'mobx-react';
import { Button, Pagination } from 'antd';

const getLabel = WeaLocaleProvider.getLabel;
const formatMultiLang = WeaLocaleProvider.formatMultiLang;
import _ from 'lodash';
import $ from 'jquery';

@observer
export default class FileUploadSetDialog extends React.Component {
  selectcategory_err;
  render() {
    const { store, onFileCancel } = this.props;
    const { fileUploadStore, isvirtualform } = store;
    const {
      categorytype, seccategory, selectcategory,
      specialSetDatas,
      specialSetColumns, currentPage, currentPagesize, dataTotal,
      mainselectOption, empowmentType, fileformat, setFieldName,
      isChangeFlag, fileisdisplay,
    } = fileUploadStore;
    let categorytypeVal = categorytype ? categorytype.value : '0';
    let hideCss0 = '';
    let hideCss1 = '';

    if (categorytypeVal == '0') {
      hideCss1 = ' hide';
    } else {
      hideCss0 = ' hide';
    }
    const options = [{
      key: '0',
      selected: categorytypeVal == '0',
      showname: getLabel(19213, '固定目录', 'label'),
    }, {
      key: '1',
      selected: categorytypeVal == '1',
      showname: getLabel(19214, '选择目录', 'label'),
    }];
    let optionsRight = [];
    optionsRight.push({ key: '0', selected: empowmentType == '0', showname: getLabel(383363, '临时赋权', 'label') });
    if (isvirtualform != '1') { // 虚拟表单不需要插入赋权
      optionsRight.push({ key: '1', selected: empowmentType == '1', showname: getLabel(388791, '插入赋权', 'label') });
    }
    const browserConditionParam = {
      completeParams: {},
      conditionDataParams: {},
      dataParams: {},
      destDataParams: {},
      hasAddBtn: false,
      hasAdvanceSerach: true,
      idSeparator: ',',
      isAutoComplete: 1,
      isDetail: 0,
      isSingle: true,
      linkUrl: '',
      pageSize: 10,
      quickSearchName: '',
      replaceDatas: [],
      title: getLabel(519718, '文档目录'),
      type: 'doccategory',
      viewAttr: 2,
    };

    return (
      <div className="wf-pc4backstage-path-baseSet-fileUploadSet" style={{ display: 'inline-block' }}>
        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@dm60j9`}
          title={getLabel(383457, '附件上传设置')}
          visible={true}
          iconBgcolor="#96358a"
          icon="icon-coms-ModelingEngine"
          hasScroll={true}
          onCancel={() => onFileCancel()}
          buttons={this.getRightMenu()}
          style={{ width: '750px', height: '430px' }}
        >
          <div>
            <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@4327jc`}
              title={getLabel(32687, '默认设置')}
              showGroup={true}
            >
              <div className="cube-wea-form-item">
                <div className="cube-wea-form-item-float-left cube-wea-form-item-upload-title">{getLabel(22210, '附件上传目录')}：</div>
                <div className="cube-wea-form-item-float-left">
                  <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@j8cmkj`}
                    options={options}
                    style={{ width: '100px' }}
                    viewAttr={2}
                    onChange={(v) => { this.changeCategorytype(v); }}
                  />
                </div>
                <div className={'cube-wea-form-item-float-left cube-wea-form-item-doccategory' + `${hideCss0}`}>
                  <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@wcq0es`}
                    type={'doccategory'}
                    fieldName="seccategory"
                    {...browserConditionParam}
                    inputStyle={{ width: 200 }}
                    replaceDatas={toJS(seccategory.valueObj)}
                    onChange={(ids, names, datas) => { this.updateFormVal('seccategory', { ids, names, datas }); }}
                  />
                </div>
                <div className={'cube-wea-form-item-float-left cube-wea-form-item-selectcategory' + `${hideCss1}`}>
                  <WeaError ecId={`${this && this.props && this.props.ecId || ''}_WeaError@u37ru3`} tipPosition="bottom"
                    error={`"${getLabel(22210, '附件上传目录')}"${getLabel(21423, '未填写')}`}
                    ref={v => this.selectcategory_err = v}
                  >
                    <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@vswyxx`}
                      options={mainselectOption}
                      value={mainselectOption && selectcategory.value}
                      style={{ width: '192px' }}
                      viewAttr={3}
                      onChange={(v) => {
                        this.updateFormVal('selectcategory', v);
                      }}
                    />
                  </WeaError>
                </div>
                <div className="cube-wea-form-item-float-left-clear" />
                <div className="cube-wea-form-item-upload">
                  <div className="cube-wea-form-item-upload-title">{getLabel(127231, '附件上传格式')}：</div>
                  <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@gnouck`}
                    helpfulTip={getLabel(128304, '填写允许上传的文件扩展名，不填写代表不限制，多个扩展名间以半角逗号分隔，如doc,docx')}
                    style={{ width: 300 }}
                    value={fileformat}
                    onChange={(value) => {
                      setFieldName('fileformat', value);
                    }}
                  />
                </div>
                <div className="cube-wea-form-item-upload">
                  <div className="cube-wea-form-item-upload-title">{getLabel(383818, '赋权类型')}：</div>
                  <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@xsz513`}
                    options={optionsRight}
                    style={{ width: 100 }}
                    value={empowmentType}
                    helpfulTip={getLabel(389529, '临时赋权：不插入权限数据，仅在建模卡片页面及查询列表方可点击查看。插入赋权：插入权限数据，系统有文档的入口的地方都可以查看。')}
                    onChange={(v, showname) => { setFieldName('empowmentType', `${v},${isChangeFlag}`); }}
                  />
                </div>
                {empowmentType == '1' && <div className="cube-wea-form-item-upload">
                  <div className="cube-wea-form-item-upload-title" />
                  <div className="cube-wea-form-item-upload-title-tip">{getLabel(389530, '临时赋权更改为插入赋权，历史数据需要文档权限重构后生效')}</div>
                </div>}
                <div className="cube-wea-form-item-upload">
                  <div className="cube-wea-form-item-upload-title ">{getLabel(513049, '显示附件上传人和时间')}：</div>

                  <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@114uzs`}

                    fieldName="fileisdisplay"
                    display="switch"
                    value={fileisdisplay}
                    style={{ display: 'inline', lineHeight: '32px' }}
                    onChange={(value) => {
                      setFieldName('fileisdisplay', value);
                    }}
                  />
                </div>
              </div>
            </WeaSearchGroup>
            <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@gh3go9`}
              className="wf-pc4backstage-path-baseSet-fileUploadSet-specialGroup"
              title={getLabel(128216, '特殊设置')}
              showGroup={true}
            >
              <div>
                <WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@i9kk07`}
                  columns={mobx.toJS(specialSetColumns)}
                  datas={mobx.toJS(specialSetDatas)}
                  onChange={(data) => {
                    fileUploadStore.formateSpecialSetParams(data);
                  }}
                  draggable={false}
                  showAdd={false}
                  showCopy={false}
                  showDelete={false}
                  getRowSelection={() => { }}
                />
                <div style={{ marginTop: 10, float: 'right' }}>
                  <Pagination ecId={`${this && this.props && this.props.ecId || ''}_Pagination@q8ri1v`}
                    current={currentPage}
                    pageSize={currentPagesize}
                    defaultCurrent={1}
                    total={dataTotal}
                    pageSizeOptions={[10, 20]}
                    showTotal={total => `${getLabel('18609','共')} ${total} ${getLabel('18256','条')}`}
                    onShowSizeChange={(current, pagesize) => {
                      fileUploadStore.getUploadFieldInfoMOBX(current, pagesize);
                    }}
                    onChange={(current, pagesize) => {
                      fileUploadStore.getUploadFieldInfoMOBX(current, pagesize);
                    }}
                  /></div>
              </div>
            </WeaSearchGroup>
          </div>
        </WeaDialog>
      </div>
    );
  }

  getRightMenu() {
    const { store, onFileCancel } = this.props;
    const { fileUploadStore } = store;

      return (
        <div>
          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@y9vvrs`} type="primary"
            onClick={() => {
            fileUploadStore.saveUploadFileInfo();
          }}
          >{getLabel(86, '保存')}</Button>
          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@65o620`} type="primary"
            onClick={() => {
            onFileCancel();
          }}
          >{getLabel(309, '关闭')}</Button>
        </div>
      );
  }

  changeCategorytype = (val) => {
    if (val == 0) {
      $('div.cube-wea-form-item-doccategory').removeClass('hide');
      $('div.cube-wea-form-item-selectcategory').addClass('hide');
    } else {
      $('div.cube-wea-form-item-doccategory').addClass('hide');
      $('div.cube-wea-form-item-selectcategory').removeClass('hide');
    }
    this.updateFormVal('categorytype', val);
  }

  updateFormVal = (key, value) => {
    const { store: { fileUploadStore } } = this.props;
    let v = null;

    if (key == 'seccategory' || key == 'subcompanyid' || key == 'formid') {
      v = {
        value: `${value.ids}`,
        valueSpan: value.names ? value.names : '',
        valueObj: [{
          id: `${value.ids}`,
          name: value.names ? value.names : '',
        }],
      };
    } else {
      v = { value };
    }
    fileUploadStore.setFieldName(key, v);
  }
}

